<template>
  <div class="app">
    <div class="topFourbox">
      <div>
        <h3>{{ regData }}</h3>
        <p>门诊挂号</p>
        <!-- <a @click="clickReg">更多<Icon type="md-arrow-forward" /></a> -->
        <div class="icon"></div>
      </div>
      <div>
        <h3>{{ userData }}</h3>
        <p>患者管理</p>
        <!-- <a @click="clickUser">更多<Icon type="md-arrow-forward" /></a> -->
        <div class="icon"></div>
      </div>
      <div>
        <h3>{{ medicalData }}</h3>
        <p>诊断管理</p>
        <!-- <a @click="$router.push({ path: 'doclist/zhenduan' })">更多<Icon type="md-arrow-forward" /></a> -->
        <div class="icon"></div>
      </div>
      <div>
        <h3>{{ drugData }}</h3>
        <p>药品管理</p>
        <!-- <a @click="clickDruglist">更多<Icon type="md-arrow-forward" /></a> -->
        <div class="icon"></div>
      </div>
    </div>
    <div class="content">
      <div>
        <div class="bulletin" ref="bulletin" v-show="tableShow1">
          <div class="box-header">
            <span>公告通知</span>
            <div class="box-tools">
              <Button type="info" class="tools-btn" @click="toNotice"
                ><Icon type="md-menu"
              /></Button>
              <Button type="success" class="tools-btn" @click="clickAdd"
                ><Icon ref="toolsbtn" :type="iconType"
              /></Button>
              <Button type="error" class="tools-btn" @click="tableShow1 = false"
                ><Icon type="md-close"
              /></Button>
            </div>
          </div>
          <Table
            ref="table"
            height="230"
            :columns="bulletinColumns"
            :data="bulletinData"
          >
            <template slot-scope="{ row }" slot="action">
              <el-button
                style="font-size: 12px; padding: 5px; background-color: #f4f4f4"
                @click="checkNotice(row)"
                ><i class="el-icon-search"></i>查看</el-button
              >
            </template>
          </Table>
        </div>
        <div class="patientList">
          <div>
            <span>待就诊患者</span>
            <Tooltip content="刷新" placement="top-start">
                <button class="refresh" @click="clickRefresh"><Icon type="md-sync" /></button>
            </Tooltip>
          </div>
          <Table :columns="patientColumns" :data="patientData" height="358"></Table>
        </div>
      </div>
      <div>
        <el-calendar v-model="caleValue" @click.native="getCale"> </el-calendar>
        <div class="docList">
          <div class="box-header">
            <span>值班科室</span>
            <div class="doc-tools">
              <Select
                v-model="modelDoc"
                style="width: 300px"
                @on-change="getDept1"
              >
                <Option
                  v-for="item in docList"
                  :value="item.deptId"
                  :key="item.deptId"
                  >{{ item.deptName }}</Option
                >
              </Select>
            </div>
          </div>
          <Collapse v-model="docDept1" accordion @on-change="getCale">
            <Panel
              v-for="item in docDeptList"
              :key="item.deptId"
              :name="item.deptName"
            >
              {{ item.deptName }}
              <p slot="content">
                <Table :columns="docColumns" :data="docData" :show-header="false"></Table>
              </p>
            </Panel>
          </Collapse>
        </div>
      </div>
    </div>
    <Modal v-model="modalNotice" footer-hide title="通知公告">
      <div class="mailbox-read-info">
        <h3>{{ noticeData.noticeTitle }}</h3>
        <h5>发布者：{{ noticeData.createBy }}</h5>
        <h5>发布时间：{{ noticeData.createTime }}</h5>
      </div>
      <div class="mailbox-read-message">
        <span id="mailboxContent"></span>
      </div>
    </Modal>
  </div>
</template>

<script>
import { listDept } from "@/api/system/dept";
import { listNotice } from "@/api/system/notice";
import { listUser } from "@/api/qiantai/user";
import { listDruglist } from "@/api/medicine/druglist";
import { listMedical } from "@/api/medical/Medical";
import { listDocList } from "@/api/doclist/docList";
export default {
  data() {
    return {
      modalNotice: false,
      regData: 0,
      userData: 0,
      medicalData: 0,
      drugData: 0,
      bulletinColumns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center",
        },
        {
          title: "类型",
          key: "noticeType",
          width: 80,
          align: "center",
          render: (h, params) => {
            if (params.row.noticeType == "1") {
              return h(
                "Tag",
                {
                  props: {
                    color: "primary",
                  },
                },
                "通知"
              );
            } else {
              return h(
                "Tag",
                {
                  props: {
                    color: "success",
                  },
                },
                "公告"
              );
            }
          },
        },
        {
          title: "日期",
          key: "createTime",
          width: 120,
          align: "center",
          render: (h, params) => {
            return h("span", params.row.createTime.slice(0, 10));
          },
        },
        {
          title: "发布者",
          key: "createBy",
          width: 100,
          align: "center",
        },
        {
          title: "标题",
          key: "noticeTitle",
          align: "center",
          tooltip: true,
        },
        {
          title: " ",
          width: "80px",
          align: "center",
          slot: "action",
        },
      ],
      bulletinData: [],
      tableShow: true,
      tableShow1: true,
      iconType: "md-remove",
      noticeData: {},
      caleValue: new Date(),
      docList: [],
      modelDoc: null,
      docDept1: null,
      docDeptList: [],
      docColumns: [
        {
          title: "医生姓名",
          key: "docName",
          align: "left",
        },
        {
          title: "类型",
          key: "docLevel",
          align: "right",
          render: (h, params) => {
            if (params.row.docLevel == "1") {
              return h(
                "Tag",
                {
                  props: {
                    color: "success",
                  },
                },
                "专家"
              );
            } else {
              return h(
                "Tag",
                {
                  props: {
                    color: "primary",
                  },
                },
                "普通"
              );
            }
          },
        },
      ],
      docData: [],
      patientColumns: [
        {
          title: "序号",
          type: "index",
          width: 80,
          align: "center",
        },
        {
          title: "患者姓名",
          key: "hzName",
          align: "center",
        },
        {
          title: "患者年龄",
          key: "hzAge",
          align: "center",
        },
        {
          title: "看诊医生",
          key: "hzDoc",
          align: "center",
        },
        {
          title: "科室",
          key: "hzDpet",
          align: "center",
        },
      ],
      patientData: [],
    };
  },
  created() {
    listUser({ hzState: "1" }).then((res) => {
      this.regData = res.total;
    });
    listUser().then((res) => {
      this.userData = res.total;
    });
    this.clickRefresh();
    listMedical().then((res) => {
      this.medicalData = res.total;
    });
    listDruglist().then((res) => {
      this.drugData = res.total;
    });
    listNotice().then((res) => {
      this.bulletinData = res.rows;
    });
    listDept({ parentId: 100 }).then((res) => {
      this.docList = res.data;
    });
    listDept({ parentId: 101 }).then((res) => {
      this.docDeptList = res.data;
    });
  },
  methods: {
    clickReg() {
      this.$router.push({ path: "qiantai/reg" });
    },
    clickUser() {
      this.$router.push({ path: "qiantai/user" });
    },
    clickDruglist() {
      this.$router.push({ path: "medicine/druglist" });
    },
    toNotice() {
      this.$router.push({ path: "system/notice" });
    },
    clickAdd() {
      if (this.tableShow) {
        this.tableShow = false;
        this.$refs.bulletin.style.height = "42px";
        this.iconType = "md-add";
      } else {
        this.tableShow = true;
        this.$refs.bulletin.style.height = "273px";
        this.iconType = "md-remove";
      }
    },
    checkNotice(row) {
      this.modalNotice = true;
      this.noticeData = row;
      document.getElementById("mailboxContent").innerHTML =
        this.noticeData.noticeContent;
    },
    getCale() {
      const dt = this.caleValue;
      const day = dt.getDay();
      console.log(day);
      let fromData = {};
      fromData[`day${day}am`] = "1";
      fromData.docDept = this.docDept1.toString();
      console.log(fromData);
      listDocList(fromData).then((res) => {
        this.docData = res.rows;
      });
    },
    getDept1() {
      listDept({ parentId: this.modelDoc }).then((res) => {
        this.docDeptList = res.data;
      });
    },
    clickRefresh() {
      listUser({ hzState: "0" }).then((res) => {
        this.patientData = res.rows;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.app {
  background: #ecf0f5;
}
.topFourbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  align-items: center;
  padding-top: 20px;
  font-family: "Source Sans Pro", sans-serif;
  color: #ffffff;
  & > :first-child {
    width: 300px;
    height: 120px;
    border-radius: 5px;
    background-color: #00c0ef;
    position: relative;
    h3 {
      padding: 10px 0 0 10px;
      font-size: 38px;
      font-weight: bold;
      margin: 0 0 10px 0;
      white-space: nowrap;
    }
    p {
      font-size: 15px;
      margin: 0 0 28px;
      padding-left: 10px;
    }
    a {
      position: relative;
      text-align: center;
      padding: 3px 0;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      z-index: 10;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
    }
    a:hover {
      color: rgba(255, 255, 255, 255);
      background: rgba(0, 0, 0, 0.2);
    }
    .icon {
      width: 100px;
      height: 100px;
      background: url(../../images/guahao.png);
      background-size: contain;
      transition: all 0.3s linear;
      position: absolute;
      top: 5px;
      right: 10px;
      z-index: 0;
      font-size: 90px;
      color: rgba(0, 0, 0, 0.15);
    }
    .icon:hover {
      transform: scale(1.2);
    }
  }
  & > :nth-child(2) {
    width: 300px;
    height: 120px;
    border-radius: 5px;
    position: relative;
    background-color: #00a65a;
    h3 {
      padding: 10px 0 0 10px;
      font-size: 38px;
      font-weight: bold;
      margin: 0 0 10px 0;
      white-space: nowrap;
    }
    p {
      font-size: 15px;
      margin: 0 0 28px;
      padding-left: 10px;
    }
    a {
      position: relative;
      text-align: center;
      padding: 3px 0;
      color: #fff;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      z-index: 10;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
    }
    a:hover {
      color: rgba(255, 255, 255, 255);
      background: rgba(0, 0, 0, 0.2);
    }
    .icon {
      width: 100px;
      height: 100px;
      background: url(../../images/huanzhe.png);
      background-size: contain;
      transition: all 0.3s linear;
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 0;
      font-size: 90px;
      color: rgba(0, 0, 0, 0.15);
    }
    .icon:hover {
      transform: scale(1.2);
    }
  }
  & > :nth-child(3) {
    width: 300px;
    height: 120px;
    border-radius: 5px;
    position: relative;
    background-color: #dd4b39;
    h3 {
      padding: 10px 0 0 10px;
      font-size: 38px;
      font-weight: bold;
      margin: 0 0 10px 0;
      white-space: nowrap;
    }
    p {
      font-size: 15px;
      margin: 0 0 28px;
      padding-left: 10px;
    }
    a {
      position: relative;
      text-align: center;
      padding: 3px 0;
      color: #fff;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      z-index: 10;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
    }
    a:hover {
      color: rgba(255, 255, 255, 255);
      background: rgba(0, 0, 0, 0.2);
    }
    .icon {
      width: 100px;
      height: 100px;
      background: url(../../images/zhenduan.png);
      background-size: contain;
      transition: all 0.3s linear;
      position: absolute;
      top: 5px;
      right: 10px;
      z-index: 0;
      font-size: 90px;
      color: rgba(0, 0, 0, 0.15);
    }
    .icon:hover {
      transform: scale(1.2);
    }
  }
  & > :nth-child(4) {
    width: 300px;
    height: 120px;
    border-radius: 5px;
    position: relative;
    background-color: #f39c12;
    h3 {
      padding: 10px 0 0 10px;
      font-size: 38px;
      font-weight: bold;
      margin: 0 0 10px 0;
      white-space: nowrap;
    }
    p {
      font-size: 15px;
      margin: 0 0 28px;
      padding-left: 10px;
    }
    a {
      position: relative;
      text-align: center;
      padding: 3px 0;
      color: #fff;
      color: rgba(255, 255, 255, 0.8);
      display: block;
      z-index: 10;
      background: rgba(0, 0, 0, 0.1);
      text-decoration: none;
    }
    a:hover {
      color: rgba(255, 255, 255, 255);
      background: rgba(0, 0, 0, 0.2);
    }
    .icon {
      width: 100px;
      height: 100px;
      background: url(../../images/yaopin.png);
      background-size: contain;
      transition: all 0.3s linear;
      position: absolute;
      top: 5px;
      right: 10px;
      z-index: 0;
      font-size: 90px;
      color: rgba(0, 0, 0, 0.15);
    }
    .icon:hover {
      transform: scale(1.2);
    }
  }
}
.content {
  margin-top: 20px;
  margin-left: 16px;
  display: flex;
  justify-content: space-around;
  & > :first-child {
    .bulletin {
      width: 750px;
      height: 273px;
      border-radius: 3px;
      background: #ffffff;
      border-top: 3px solid #d2d6de;
      box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
      transition: 1s 0s linear all;
      overflow: hidden;
      .box-header {
        height: 40px;
        color: #444;
        display: block;
        position: relative;
        span {
          position: absolute;
          top: 12px;
          left: 10px;
          font-size: 18px;
          margin: 0;
          line-height: 1;
        }
        .box-tools {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          height: 30px;
          width: 160px;
          top: 4px;
          right: 5px;
          .tools-btn {
            height: 30px;
            width: 46px;
            text-align: center;
          }
        }
      }
    }
    .patientList {
      margin-top: 20px;
      width: 750px;
      background: #fff;
      & > :first-child {
        display: flex;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 18px;
          padding: 10px;
        }
        .refresh {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          margin: 10px;
          line-height: 1;
          white-space: nowrap;
          cursor: pointer;
          background: #ffffff;
          border: 1px solid #dcdfe6;
          border-color: #dcdfe6;
        }
        .refresh:hover {
          color: #1890ff;
          border-color: #badeff;
          background-color: #e8f4ff;
        }
      }
      
    }
  }
  & > :nth-child(2) {
    width: 100%;
    padding: 0 18px;
    transition: 1s 0s linear all;
    .docList {
      width: 100%;  
      border-top-color: #00a65a !important;
      position: relative;
      border-radius: 3px;
      background: #ffffff;
      border-top: 3px solid #d2d6de;
      margin-bottom: 20px;
      margin-top: 20px;
      box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
      .box-header {
        height: 40px;
        color: #444;
        display: block;
        position: relative;
        span {
          position: absolute;
          top: 12px;
          left: 10px;
          font-size: 18px;
          margin: 0;
          line-height: 1;
        }
        .doc-tools {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          height: 30px;
          width: 160px;
          top: 4px;
          left: 100px;
        }
      }
    }
  }
}
.mailbox-read-info {
  height: 60px;
  border-bottom: 1px solid #f4f4f4;
  padding: 10px;
  font-family: "Source Sans Pro", sans-serif;
  position: relative;
  & > :first-child {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    margin-bottom: 5px;
  }
  & > :nth-child(2) {
    position: absolute;
    left: 10px;
    color: #999;
    font-size: 14px;
  }
  & > :nth-child(3) {
    position: absolute;
    right: 10px;
    color: #999;
    font-size: 14px;
  }
}
.mailbox-read-message {
  padding: 10px;
}
::v-deep {
  .ivu-btn {
    padding: 0;
  }
  .ivu-modal-body {
    padding: 5px;
  }
  .el-calendar-day {
    height: 50px;
  }
  .el-calendar__body {
    padding: 12px 0px 20px;
  }
  .ivu-collapse-content {
    padding: 0;
  }
  .ivu-collapse-content > .ivu-collapse-content-box {
    padding: 0;
  }
}
</style>
